<template>
	<view class="positioning-container">
		<view class="uni-common-mt">
			<view>
				<view class="cover1 cover_nav">
					<view class="cover_nav_left">
						<view>围栏半径：</view>
						<view class='input' @tap='tapInput'>
							<view class='main_search_input' :hidden="inputFocus">{{inputInfo}}</view>
							<input class='main_search_input' :hidden="!inputFocus" :value='inputModel' :focus='inputFocus' @blur='blurInput'></input>
						</view>
						<view>m/米</view>
					</view>
					<view class="cover_nav_right">当前人数：{{allperson}}人</view>
					<view class="cover_nav_right">保护人数：{{finishClockIn.length}}人</view>
				</view>
				<map ref="map" id="map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers"
				 :polyline="polyline" :scale="scale" :circles="circles" @markertap="markertap">
					<cover-view class="uni-banner" v-if="bannerShow">
						<cover-view class="banner_nav">
							<cover-view class="banner_name">
								<cover-view>当前已脱离【设防范围】</cover-view>
								<cover-view>请尽快核实</cover-view>
								<cover-image src="../../static/images/dager.png"></cover-image>
							</cover-view>
							<cover-view class="banner_ok" @click="bannerShow=false">收到</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="uni-mask" v-if="bannerShow"></cover-view>
					<!-- <cover-view class="cover">
						<cover-view class="cover_con">
							<cover-view class="cover_con_div">
								<cover-view class="cover_con_name" @click="bannerShow=true">
									<cover-image src="../../static/images/dh.png"></cover-image>
								</cover-view>
								<cover-view class="cover_con_p">潍坊</cover-view>
							</cover-view>
							<cover-view class="cover_con_div">
								<cover-view class="cover_con_name">
									<cover-image src="../../static/images/tq.png"></cover-image>
								</cover-view>
								<cover-view class="cover_con_p">小雨 22~28°C</cover-view>
							</cover-view>
						</cover-view>
					</cover-view> -->
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import route from '@/components/draw-map/draw-map.js';
	export default {
		data() {
			return {
				latitude: 30.689514,
				longitude: 104.052012,
				markers: [],
				polyline: [],
				scale: 15,
				circles: [],
				inputFocus: false, // input 框的focus状态
				inputModel: '200', // input 框的输入内容
				inputInfo: '200', // cover-view 显示的 input 的输入内容,初始值充当placeholder作用
				bannerShow: false,
				// 应到人数
				allperson: 0,
				// 实到人数
				nowperson: 0,
				// 当前显示打卡设备
				clockInItem: {},
				// 已完成打卡设备
				finishClockIn: []
			}
		},
		onLoad(option) {
			this.longitude = this.$utils.getData("centerX")
			this.latitude = this.$utils.getData("centerY")
		},
		onShow() {
			this.getTeamData()
		},
		methods: {
			/**
			 * 获取当前位置
			 */
			getNowLocation(userdata) {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						if (this.markers.length) {
							this.longitude = this.markers[0].longitude
							this.latitude = this.markers[0].latitude
						} else {
							this.longitude = res.longitude
							this.latitude = res.latitude
						}
						// uni.createMapContext("map", this).moveToLocation({
						// 	longitude: this.longitude,
						// 	latitude: this.latitude
						// })
						let arr = this.markers.filter(item => item.id === 0)
						if (arr.length) {
							this.markers.forEach(item => {
								if (item.id === 0) {
									item = {
										id: 0,
										longitude: res.longitude,
										latitude: res.latitude,
										iconPath: '../../static/images/dingwei.png',
										width: 20,
										height: 32
									}
								}
							})
						} else {
							this.markers[0] = {
								id: 0,
								longitude: res.longitude,
								latitude: res.latitude,
								iconPath: '../../static/images/dingwei.png',
								width: 20,
								height: 32,
							}
						}
						this.circles[0] = {
							longitude: res.longitude,
							latitude: res.latitude,
							color: '##CEF6F6',
							radius: Number(this.inputModel),
							fillColor: '#CEF6F67F'
						}
					}
				})
				if (getCurrentPages()[getCurrentPages().length - 1].route=== 'pages/electronic-fence/electronic-fence') {
					setTimeout(() => {
						this.getTeamData()
					}, 3000)
				}
			},
			toJSON () {},
			/**
			 * 获取设备列表
			 */
			getTeamData() {
				this.$myRuquest({
					url: "/jsl/user/DeviceLocationById",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": this.$utils.getData("p_uid")
							}
						}
					}
				}).then(res => {
					this.userData = res
					this.$utils.setData('userdata', res)
					let resmarks = []; // 图标的集合
					res.forEach(item => {
						let mar = this.createMarker(item);
						resmarks.push(mar);
						let space = this.computeSpace(item.latitude, item.longitude, this.latitude, this.longitude)
						if (space * 1000 <= Number(this.inputModel)) {
							if (!this.finishClockIn.includes(item.package_no)) {
								this.finishClockIn.push(item.package_no)
							}
						} else if (this.finishClockIn.includes(item.package_no)) {
							this.finishClockIn.splice(this.finishClockIn.indexOf(item.package_no), 1)
							this.bannerShow = true
						}
					})
					this.allperson = res.length
					let userobj = []
					this.markers.forEach(item => {
						if (item.id === 0) {
							userobj.push(item)
						}
					})
					this.markers = userobj.concat(resmarks)
					this.getNowLocation()
				}).catch()
			},
			/**
			 * 还有地图标识，可以在name上面动手
			 */
			createMarker(point) {
				let latitude = point.latitude;
				let longitude = point.longitude;
				let marker = {
					id: Number(point.id),
					latitude: latitude,
					longitude: longitude,
					title: point.package_no,
					iconPath: '../../static/images/dingwei.png',
					width: 20,
					height: 32,
					callout: {
						content: point.package_no,
						color: '#fff',
						fontSize: 12,
						borderRadius: 2,
						bgColor: '#21C885',
						padding: 2,
						display: 'ALWAYS',
						textAlign: 'center'
					}
				}
				return marker;
			},
			/**
			 * 计算距离
			 */
			computeSpace(lat1, lng1, lat2, lng2) {
				let radLat1 = lat1 * Math.PI / 180.0;
				let radLat2 = lat2 * Math.PI / 180.0;
				let a = radLat1 - radLat2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(
					Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				return s // 单位千米
			},
			tapInput() {
				this.inputFocus = true;
				//初始占位清空
				if (this.inputInfo == '请输入') {
					this.inputInfo = '';
				}
			},
			blurInput(e) {
				this.inputInfo = e.detail.value || '请输入';
				this.inputFocus = false;
				this.circles[0].radius = Number(e.detail.value) || 200
			}
		}
	}
</script>

<style lang="scss">
	map {
		width: 100%;
		height: calc(100vh - 60rpx);
		margin-top: 60rpx;
	}

	.cover {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 24rpx;
		width: 94%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 0px rgba(6, 0, 1, 0.16);
		border-radius: 16rpx 16rpx 0px 0px;
		display: block;
	}

	.cover1 {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		line-height: 60rpx;
		height: 60rpx;
		width: 100%;
		background: rgba(33, 200, 133, 1);
		display: block;
	}

	.cover2 {
		display: flex;
		line-height: 60rpx;
		height: 60rpx;
		width: 100%;
		background: rgba(33, 200, 133, 1);
		display: block;
	}

	.cover_nav {
		padding: 0 25rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		display: -webkit-flex;
	}

	.cover_nav_right {
		width: 28%;
		font-size: 24rpx;
		line-height: 60rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.cover_nav_left {
		width: 40% !important;
		font-size: 24rpx;
		line-height: 2.6;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		display: -webkit-flex;
	}

	.cover_nav_left cover-view {
		line-height: 2.6;
	}

	.main_search_input {
		line-height: 1.8 !important;
	}

	.input {
		border: 1px solid #fff;
		width: 80rpx;
		line-height: 40rpx;
		height: 40rpx;
		margin-top: 8rpx;
		margin-right: 6rpx;
		padding-left: 4rpx;
		font-size: 24rpx;
	}

	.cover_con {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		display: -webkit-flex;
	}

	.cover_con_div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		display: -webkit-flex;
		line-height: 96rpx;
		width: 50%;
		height: 96rpx;
	}

	.cover_con_name {
		margin-left: 35rpx;
	}

	.cover_con_name cover-image {
		width: 60rpx;
		height: 60rpx;
		margin: 18rpx auto;
	}

	.cover_con_p {
		padding-left: 22rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #42BFEC;
		line-height: 96rpx;
	}

	/* 弹出层形式的广告 */
	.uni-banner {
		width: 68%;
		position: fixed;
		left: 50%;
		top: 50%;
		background: #FFF;
		border-radius: 6upx;
		z-index: 9999;
		transform: translate(-50%, -50%);
		box-shadow: 0px 0px 17rpx 1px rgba(0, 0, 0, 0.09);
	}

	.banner_img {
		width: 116rpx;
		height: 116rpx;
		position: absolute;
		top: -58rpx;
		left: 40%;
	}

	.banner_nav {
		width: 100%;
		padding-top: 62rpx;
	}

	.banner_name {
		margin: 0 86rpx;
		text-align: center;
	}

	.banner_name cover-view {
		width: 100%;
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.banner_name cover-image {
		width: 73rpx;
		height: 64rpx;
		margin: 0 auto;
	}

	.banner_ok {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 239rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #21C885;
		border-radius: 6rpx;
		margin: 27rpx auto 47rpx;
	}

	.uni-mask {
		background: rgba(0, 0, 0, 0);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 9998;
	}
</style>
